<template>

	<view class="xb-page">
		<form @submit="getstudent">
			<view class="xb-add-desc-head">没有要找到的学员?<span @click="addstu" class="xb-add-desc">添加新成员</span></view>
			<view class="xb-search-cell">
				<uni-icon  type="search" size="22" color="#666666"></uni-icon>
				<input @confirm="confirm" confirm-type="search" style="width: 100%;" name="keyword" v-bind:value="formData.keyword" class="xb-search" placeholder-class="xb-"
				 placeholder="请输入名称" />
			</view>
			<view>
				<view class="uni-flex uni-row" style="flex-wrap: wrap; margin-left: 20px;margin-top: 10px;">
					<uni-tag type="comments" size="small">普通查询</uni-tag>
				</view>
			</view>
		</form>
		<view class="page-total-comments">
			学员数{{stucount}},试听{{teststucount}}，过期{{overstucount}}
		</view>
		<view>
			<view @click="studetail" hover-class="" v-for="stu in stulist" :key="stu.id" class="uni-flex uni-row page-student xb-list-cell"
			 style="justify-content: space-between;align-items: center;">
				<view class="uni-flex uni-row" style="margin-top: 10px; margin-bottom: 10px;">
					<image style="width: 50px;height: 50px;" class="page-stu-head" src="../../../static/headempty.png"></image>
					<view class="uni-flex uni-column" style="margin-left: 20px;">
						<view class="page-stu-name">{{stu.nickname}}</view>
						<view class="page-stu-remain">总剩余课时数{{stu.remainclass}}|合约到期天书{{stu.remaindays}}</view>
					</view>
				</view>
				<view class="page-webchat">
				<uni-icon type="weixin" size="22" color="#666666"></uni-icon>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import pageHead from '../../../components/page-head.vue'
	import uniTag from '../../../components/uni-tag.vue'
	import uniIcon from '../../../components/uni-icon.vue'
	export default {
		components: {
			pageHead,
			uniTag,
			uniIcon
		},
		onLoad: function() {
			uni.showLoading({
				title: '加载中...'
			});
		},
		onShow: function() {
			uni.showLoading({
				title: '加载中'
			});
			uni.hideLoading();

		},
		data() {
			return {
				formData: {
					keyword: '',
					pageIndex: 0,
					pageSize: 20,
				},
				stulist: [{
						id: '',
						headurl: '',
						nickname: '小疯子',
						remainclass: 5,
						remaindays: 211,
					},
					{
						id: '',
						headurl: '',
						nickname: '绿风',
						remainclass: 10,
						remaindays: 256,
					},
				],
				stucount: 0,
				teststucount: 0,
				overstucount: 0,

			}

		},
		onLoad: function(option) {
			//this.initData();
		},
		methods: {
			addstu:function(){
				uni.navigateTo({
					url:'addstudent',
				})
				
			},
			
			studetail(id) {
				uni.navigateTo({
					url: 'studetail?sid=' + id
				});

			},
			getstudent() {
				let data = formData;
				uni.request({
					url: '/api/stu/stuOfOrg',
					method: 'POST',
					data: data,
					success: (data) => {
						uni.stopPullDownRefresh();
						if (data.statusCode == 200) {
							this.stulist = data.data;
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},

		}
	}
</script>

<style scoped>
	@import "../../../common/uni.css";
	@import "../../../common/xb.css";
	@import "../../../common/icon.css";

	.page-webchat {
		margin-right: 10px;
	}

	.page-stu-head {
		height: 50px;
		width: 50px;
	}

	.page-total-comments {
		font-size: 25px;
		color: #929292;
	}

	.page-stu-name {
		font-size: 28px;
		color: #000000;
	}

	.page-stu-remain {
		font-size: 25px;
		color: #C0C0C0;

	}

	.stu_total_class {
		margin-top: 10px;
		margin-left: 10px;
		color: #DDDDDD;
		font-size: 30px;
	}

	.stu_head_cls {
		margin-left: 20px;
		height: 80px;
		width: 80px;
	}

	.web_chat_cls {

		margin-right: 20px;
		height: 35px;
		width: 35px;
	}

	.stu_name_class {
		font-size: 30px;
		color: #BEBEBE;
	}

	.stu_remain_class {
		font-size: 25px;
		color: #DDDDDD;
	}

	.stu_cancel {
		margin-left: 10px;
		font-size: 35px;
		color: #CCCCCC;
	}

	.title_match_query {
		color: #BBBBBB;
		margin-left: 20px;
	}

	.tag_cls {
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 25px;
		background-color: #4CD964;
		color: #FFFFFF;
	}
</style>
